<template>
  <div>
    <el-dialog title="预览文件"
      :visible.sync="dialogVisible"
      width="80%"
      top="5vh"
      @close="cancel"
      :close-on-click-modal="false">
      <div v-if="currentPdfUrl">
        <iframe class="pdf-viewer"
          id="pdf-viewer"
          type="application/pdf"
          :src="`/pdfjs/web/viewer.html?url=` + encodeURIComponent(currentPdfUrl)" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    pdfUrl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: true,
      currentPdfUrl: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.currentPdfUrl = this.pdfUrl
    })
  },
  methods: {
    cancel() {
      this.$emit('closeLookPdf')
    }
  }
}
</script>

<style lang="less" scoped>
.pdf-viewer {
  width: 100%;
  height: 75vh;
}
</style>
